<template>
  <div class="full-box padding-box shadow-box">
    <OperateCommon :showBack="true" @back="goBack"> </OperateCommon>
    <el-collapse v-if="info" v-model="activeNames" :accordion="false">
      <el-collapse-item
        v-for="item in collapseItems"
        :key="item.id"
        :title="item.title"
        :name="item.id"
      >
        <!-- 项目信息 -->
        <div v-if="item.id == 1">
          <div class="desc">
            <label>项目名称</label>
            <span>{{ info.project_name }}</span>
          </div>
          <div class="desc">
            <label>建设单位</label>
            <span>{{ info.owner_name }}</span>
          </div>
          <div class="desc">
            <label>建设地址</label>
            <span>{{ info.project_address }}</span>
          </div>
          <div class="desc">
            <label>总投资额</label>
            <span>{{ info.investment }} ( 万元 )</span>
          </div>
          <div class="desc">
            <label>建设规模及内容</label>
            <span>{{ info.project_content }}</span>
          </div>
          <div class="desc">
            <label>开工日期</label>
            <span>{{ info.fact_start_date }}</span>
          </div>
          <div class="desc">
            <label>竣工日期</label>
            <span>{{ info.fact_end_date }}</span>
          </div>
        </div>
        <!-- 审计报告 -->
        <div v-if="item.id == 2">
          <div v-if="info.is_finish != '是'">
            <template v-if="pageType == 0">
              <el-empty
                :image-size="80"
                description="尚未提交审计报告"
              ></el-empty>
            </template>
            <template v-if="pageType == 1">
              <el-form
                :model="confirmForm"
                ref="confirmForm"
                :rules="confirmRules"
                label-width="100px"
                :inline="false"
                size="normal"
              >
                <div class="d-model">
                  <div class="d-row">
                    <!-- <el-form-item
                    label-width="200px"
                    label="是否完成审计征求意见报告"
                    prop="is_finish"
                  >
                    <el-select
                      style="width: 100px"
                      v-model="confirmForm.is_finish"
                    >
                      <el-option :key="0" label="是" value="是"></el-option>
                      <el-option :key="1" label="否" value="否"></el-option>
                    </el-select>
                  </el-form-item> -->
                    <el-form-item
                      label-width="230px"
                      label="审计征求意见报告完成日期"
                      prop="fact_finish_date"
                    >
                      <el-date-picker
                        v-model="confirmForm.fact_finish_date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item
                      label-width="150px"
                      label="审计征求意见报告"
                      size="normal"
                      prop="RCReport"
                    >
                      <CommonUpload
                        tableName="audit"
                        useType="RCReport"
                        :pid="id"
                        @fileChange="RCChange"
                      ></CommonUpload>
                    </el-form-item>
                  </div>
                  <div class="d-row">
                    <!-- <el-form-item
                    label-width="200px"
                    label="是否完成审计报告"
                    prop="is_audit"
                  >
                    <el-select
                      style="width: 100px"
                      v-model="confirmForm.is_audit"
                    >
                      <el-option :key="0" label="是" value="是"></el-option>
                      <el-option :key="1" label="否" value="否"></el-option>
                    </el-select>
                  </el-form-item> -->
                    <el-form-item
                      label-width="230px"
                      label="审计报告完成日期"
                      prop="fact_audit_date"
                    >
                      <el-date-picker
                        v-model="confirmForm.fact_audit_date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item
                      label-width="150px"
                      label="审计报告"
                      size="normal"
                      prop="AReport"
                    >
                      <CommonUpload
                        tableName="audit"
                        useType="AReport"
                        :pid="id"
                        @fileChange="AChange"
                      ></CommonUpload>
                    </el-form-item>
                  </div>

                  <el-form-item label-width="0px" label="" prop="">
                    <el-button
                      type="primary"
                      size="default"
                      @click="doneConfirm"
                      >提交</el-button
                    >
                  </el-form-item>
                </div>
              </el-form>
            </template>
          </div>
          <!-- done -->
          <div v-if="info.is_finish == '是'">
            <div class="desc">
              <label class="w-300">审计征求意见报告完成日期</label>
              <span>{{ info.fact_finish_date }}</span>
            </div>
            <div class="desc">
              <label class="w-300">审计征求意见报告</label>
              <span>
                <CommonUpload
                  tableName="audit"
                  useType="RCReport"
                  :pid="id"
                  :showUploadBtn="false"
                  :disabled="true"
                ></CommonUpload>
              </span>
            </div>
            <div class="desc">
              <label class="w-300">审计报告完成日期</label>
              <span>{{ info.fact_audit_date }}</span>
            </div>
            <div class="desc">
              <label class="w-300">审计报告</label>
              <span>
                <CommonUpload
                  tableName="audit"
                  useType="AReport"
                  :pid="id"
                  :showUploadBtn="false"
                  :disabled="true"
                ></CommonUpload>
              </span>
            </div>
          </div>
        </div>
        <!-- 审计问题整改 -->
        <div v-if="item.id == 3 && info.is_finish == '是'">
          <div v-if="info.audit_problem_abstract == ''">
            <template v-if="pageType == 0">
              <el-empty :image-size="80" description="暂无问题"></el-empty>
            </template>
            <template v-if="pageType == 1">
              <el-input
                type="textarea"
                v-model="audit_problem_abstract"
                placeholder="请输入审计问题摘要"
                :autosize="{
                  minRows: 3,
                  maxRows: 6,
                }"
              ></el-input>
              <el-button
                style="margin-top: 10px"
                type="primary"
                size="default"
                @click="sendQuestion"
                >提交</el-button
              >
            </template>
          </div>
          <div v-if="info.audit_problem_abstract != ''">
            <div class="desc">
              <label>审计问题摘要</label>
              <span>{{ info.audit_problem_abstract }}</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getAuditDetail, postAuditProjectAdd } from "@/api/Audit/Index";
import OperateCommon from "@/components/Common/OperateCommon.vue";
import { required, haveFile } from "@/utils/eValidate";
import CommonUpload from "@/components/Common/CommonUpload.vue";
export default {
  components: { OperateCommon, CommonUpload },
  name: "AuditDetails",
  data() {
    return {
      id: 0,
      pageType: 0,
      info: null,
      activeNames: ["1", "2"],
      collapseItems: [
        { id: "1", title: "项目信息" },
        { id: "2", title: "审计报告" },
      ],
      confirmForm: {
        is_finish: "",
        fact_finish_date: "",
        fact_audit_date: "",
        is_audit: "",
        RCReport: 0,
        AReport: 0,
      },
      confirmRules: {
        plan_finish_date: [required],
        plan_audit_date: [required],
        fact_finish_date: [required],
        fact_audit_date: [required],
        RCReport: [haveFile],
        AReport: [haveFile],
      },
      audit_problem_abstract: "",
    };
  },
  methods: {
    initData() {
      getAuditDetail({
        id: this.id,
      }).then((res) => {
        this.info = res.data;
        this.openQuestion();
      });
    },
    openQuestion() {
      if (this.info.is_finish == "是") {
        this.collapseItems = [
          { id: "1", title: "项目信息" },
          { id: "2", title: "审计报告" },
          { id: "3", title: "审计问题整改" },
        ];
        this.activeNames = ["1", "2", "3"];
      }
    },
    sendQuestion() {
      if (this.audit_problem_abstract.trim() == "") {
        this.$message.error("问题摘要不能为空");
        return;
      }
      postAuditProjectAdd({
        id: this.info.id,
        audit_problem_abstract: this.audit_problem_abstract.trim(),
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success("审计问题提交成功");
          this.initData();
        }
      });
    },
    doneConfirm() {
      this.$refs.confirmForm[0].validate((valid) => {
        if (valid) {
          this.confirmForm.id = this.id;
          this.confirmForm.is_finish = "是";
          this.confirmForm.is_audit = "是";
          postAuditProjectAdd(this.confirmForm).then((res) => {
            if (res.code == 0) {
              this.$message.success("审计完成确认成功");
              this.initData();
            }
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    RCChange(val) {
      this.confirmForm.RCReport = val.length;
    },
    AChange(val) {
      this.confirmForm.AReport = val.length;
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.pageType = this.$route.params.pageType;
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
.d-model {
  margin-bottom: 10px;
  font-weight: 600;
  background-color: #f2f6fc;
  box-sizing: border-box;
  padding: 10px;
}
.d-row {
  margin: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #000;
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
}
.d-row-child {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.d-textarea {
  width: 100%;
  margin: 0 auto;
}

:deep(.el-form-item__error) {
  width: 100px;
}

.desc {
  .w-300 {
    flex: 0 0 300px !important;
  }
}
</style>